/*
 * @Description:
 * @Author: your name
 * @version:
 * @Date: 2024-05-09 13:28:37
 * @LastEditors: your name
 * @LastEditTime: 2024-05-09 14:10:41
 */
import * as echarts from "echarts";
import {lineColors} from "@/store/staticData";

// 故障率曲线
const mistakeOpts = (dataSource) => {
    const option = {
        backgroundColor: "rgba(0,0,0,0)",
        grid: {
            left: "5%",
            right: "10%",
            top: "10%",
            bottom: "0%",
            containLabel: true,
        },
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "line",
                lineStyle: {
                    color: "rgba(50, 216, 205, 1)",
                },
            },
        },
        xAxis: [
            {
                type: "category",
                boundaryGap: 1,
                axisLine: {
                    show: false,
                },
                axisLabel: {
                    color: "#A1A7B3",
                },
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },

                data: dataSource.map((item) => item.name),
            },
        ],
        yAxis: [
            {
                type: "value",
                name: "",
                padding: 5,
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: "#A1A7B3",
                        type: "dashed",
                    },
                },
                axisLine: {
                    show: false,
                },
                axisLabel: {
                    show: true,
                    margin: 10,
                    textStyle: {
                        color: "#A1A7B3",
                    },
                },
                axisTick: {
                    show: false,
                },
            },
        ],
        series: [
            {
                name: "今日",
                type: "line",
                smooth: true,
                stack: "总量",
                symbolSize: 5,
                showSymbol: false,
                itemStyle: {
                    normal: {
                        color: "#23D0C4",
                        lineStyle: {
                            color: "#23D0C4",
                            width: 2,
                        },
                    },
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: "rgba(50, 216, 205, 1)",
                                },
                                {
                                    offset: 1,
                                    color: "rgba(255, 255, 255, 0.2)",
                                },
                            ],
                            false
                        ),
                    },
                },
                data: dataSource.map((item) => item.value),
            },
        ],
    };
    return option;
};

// 建设开工情况
// myChart echarts对象
// dataSource Array<{name,value}>
export const constructionOpts = (myChart, dataSource) => {
    const data = [];
    const data2 = [];
    for (let i = 0; i < dataSource.length; i++) {
        data.push(
            {
                value: dataSource[i].value,
                name: dataSource[i].name,
                itemStyle: {
                    normal: {
                        borderWidth: 8,
                        shadowBlur: 20,
                        borderRadius: 20,
                        borderColor: lineColors[i],
                        shadowColor: lineColors[i],
                    },
                },
            },
            {
                value: 5,
                name: "",
                itemStyle: {
                    normal: {
                        label: {
                            show: false,
                        },
                        labelLine: {
                            show: false,
                        },
                        color: "rgba(0, 0, 0, 0)",
                        borderColor: "rgba(0, 0, 0, 0)",
                        borderWidth: 0,
                    },
                },
            }
        );
        data2.push(
            {
                value: dataSource[i].value,
                name: dataSource[i].name,
            },
            {
                value: 5,
                name: "",
                itemStyle: {
                    normal: {
                        label: {
                            show: false,
                        },
                        labelLine: {
                            show: false,
                        },
                        color: "rgba(0, 0, 0, 0)",
                        borderColor: "rgba(0, 0, 0, 0)",
                        borderWidth: 0,
                        opacity: 0.2,
                    },
                },
            }
        );
    }

    let angle = 0; //角度，用来做简单的动画效果的
    const option = {
        backgroundColor: "#061740",
        color: lineColors,
        legend: {
            right: "10%",
            top: "40%",
            icon: "rect",
            itemWidth: 15,
            itemHeight: 15,
            textStyle: {
                color: "#ffffff",
            },
        },
        series: [
            {
                //外线1
                name: "ring5",
                type: "custom",
                coordinateSystem: "none",
                renderItem: function (params, api) {
                    return {
                        type: "arc",
                        shape: {
                            cx: api.getWidth() / 3,
                            cy: api.getHeight() / 2,
                            r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
                            startAngle: ((0 + angle) * Math.PI) / 180,
                            endAngle: ((90 + angle) * Math.PI) / 180,
                        },
                        style: {
                            stroke: "#4EE9E6",
                            fill: "transparent",
                            lineWidth: 1.5,
                        },
                        silent: true,
                    };
                },
                data: [0],
            },
            {
                //内线1
                name: "ring5",
                type: "custom",
                coordinateSystem: "none",
                renderItem: function (params, api) {
                    return {
                        type: "arc",
                        shape: {
                            cx: api.getWidth() / 3,
                            cy: api.getHeight() / 2,
                            r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
                            startAngle: ((180 + angle) * Math.PI) / 180,
                            endAngle: ((270 + angle) * Math.PI) / 180,
                        },
                        style: {
                            stroke: "#4EE9E6",
                            fill: "transparent",
                            lineWidth: 1.5,
                        },
                        silent: true,
                    };
                },
                data: [0],
            },
            {
                //外线2
                name: "ring5",
                type: "custom",
                coordinateSystem: "none",
                renderItem: function (params, api) {
                    return {
                        type: "arc",
                        shape: {
                            cx: api.getWidth() / 3,
                            cy: api.getHeight() / 2,
                            r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
                            startAngle: ((270 + -angle) * Math.PI) / 180,
                            endAngle: ((40 + -angle) * Math.PI) / 180,
                        },
                        style: {
                            stroke: "#4EE9E6",
                            fill: "transparent",
                            lineWidth: 1.5,
                        },
                        silent: true,
                    };
                },
                data: [0],
            },
            {
                //外线2
                name: "ring5",
                type: "custom",
                coordinateSystem: "none",
                renderItem: function (params, api) {
                    return {
                        type: "arc",
                        shape: {
                            cx: api.getWidth() / 3,
                            cy: api.getHeight() / 2,
                            r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
                            startAngle: ((90 + -angle) * Math.PI) / 180,
                            endAngle: ((220 + -angle) * Math.PI) / 180,
                        },
                        style: {
                            stroke: "#4EE9E6",
                            fill: "transparent",
                            lineWidth: 1.5,
                        },
                        silent: true,
                    };
                },
                data: [0],
            },
            {
                //绿点1
                name: "ring5",
                type: "custom",
                coordinateSystem: "none",
                renderItem: function (params, api) {
                    let x0 = api.getWidth() / 3;
                    let y0 = api.getHeight() / 2;
                    let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65;
                    let point = getCirlPoint(x0, y0, r, 90 + -angle);
                    return {
                        type: "circle",
                        shape: {
                            cx: point.x,
                            cy: point.y,
                            r: 4,
                        },
                        style: {
                            stroke: "#66FFFF", //粉
                            fill: "#66FFFF",
                        },
                        silent: true,
                    };
                },
                data: [0],
            },
            {
                //绿点2
                name: "ring5", //绿点
                type: "custom",
                coordinateSystem: "none",
                renderItem: function (params, api) {
                    let x0 = api.getWidth() / 3;
                    let y0 = api.getHeight() / 2;
                    let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65;
                    let point = getCirlPoint(x0, y0, r, 270 + -angle);
                    return {
                        type: "circle",
                        shape: {
                            cx: point.x,
                            cy: point.y,
                            r: 4,
                        },
                        style: {
                            stroke: "#66FFFF", //粉
                            fill: "#66FFFF",
                        },
                        silent: true,
                    };
                },
                data: [0],
            },
            {
                //绿点3
                name: "ring5",
                type: "custom",
                coordinateSystem: "none",
                renderItem: function (params, api) {
                    let x0 = api.getWidth() / 3;
                    let y0 = api.getHeight() / 2;
                    let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6;
                    let point = getCirlPoint(x0, y0, r, 90 + angle);
                    return {
                        type: "circle",
                        shape: {
                            cx: point.x,
                            cy: point.y,
                            r: 4,
                        },
                        style: {
                            stroke: "#66FFFF", //粉
                            fill: "#66FFFF",
                        },
                        silent: true,
                    };
                },
                data: [0],
            },
            {
                //绿点4
                name: "ring5", //绿点
                type: "custom",
                coordinateSystem: "none",
                renderItem: function (params, api) {
                    let x0 = api.getWidth() / 3;
                    let y0 = api.getHeight() / 2;
                    let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6;
                    let point = getCirlPoint(x0, y0, r, 270 + angle);
                    return {
                        type: "circle",
                        shape: {
                            cx: point.x,
                            cy: point.y,
                            r: 4,
                        },
                        style: {
                            stroke: "#66FFFF", //粉
                            fill: "#66FFFF",
                        },
                        silent: true,
                    };
                },
                data: [0],
            },
            {
                name: "",
                type: "pie",
                clockWise: false,
                radius: ["98%", "95%"],
                hoverAnimation: false,
                center: ["33.33%", "50%"],
                top: "center",
                itemStyle: {
                    normal: {
                        label: {
                            show: false,
                        },
                    },
                },
                data: data,
            },
            {
                type: "pie",
                top: "center",
                startAngle: 90,
                clockwise: false,
                center: ["33.33%", "50%"],
                legendHoverLink: false,
                hoverAnimation: false,
                radius: ["94%", "55%"],
                itemStyle: {
                    opacity: 0.15,
                },
                label: {
                    show: false,
                    position: "center",
                },
                labelLine: {
                    show: false,
                },
                data: data2,
            },
            {
                name: "",
                type: "pie",
                clockWise: false,
                center: ["33.33%", "50%"],
                radius: ["39%", "38%"],
                hoverAnimation: false,
                top: "center",
                itemStyle: {
                    normal: {
                        label: {
                            show: false,
                        },
                    },
                },
                data: data,
            },
        ],
    };

    //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
    function getCirlPoint(x0, y0, r, angle) {
        let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
        let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
        return {
            x: x1,
            y: y1,
        };
    }

    function draw() {
        angle = angle + 3;
        myChart.setOption(option, true);
        window.requestAnimationFrame(draw);
    }

    draw();
};

// 运营统计
// dataSource Array<{name,value}>
export const operateOpts = (dataSource) => {
    const img2 = "";
    const img = "";
    // 所有线路运营长度
    const sum = dataSource.reduce((cur, pre) => {
        return cur + pre.value;
    }, 0);
    const data = [];
    const legendData = [];// 图例数据
    // 数据处理
    dataSource.forEach((item, index) => {
        const {name, value} = item;
        let legendName = name.slice(-3) + "--" + value.toFixed(1) + "公里";
        legendData.push(legendName);
        data.push(
            {
                value: value.toFixed(0),
                name: legendName,
                itemStyle: {
                    borderWidth: 5,
                    shadowBlur: 20,
                    borderColor: lineColors[index],
                    shadowColor: lineColors[index],
                },
            },
            {
                value: sum / 25,
                name: "",
                itemStyle: {
                    label: {
                        show: false,
                    },
                    labelLine: {
                        show: false,
                    },
                    color: "rgba(0, 0, 0, 0)",
                    borderColor: "rgba(0, 0, 0, 0)",
                    borderWidth: 0,
                },
            }
        );
    });
    const seriesOption = [
        {
            name: "",
            type: "pie",
            radius: [55, 59],
            center: ["18.4%", "center"],// 圆心位置
            emphasis: {
                scale: false,
            },
            label: {
                show: false,
            },
            data: data,
        },
    ];

    const option = {
        backgroundColor: "rgba(0,0,0,0)",
        color: lineColors,
        graphic: {
            elements: [
                {
                    type: "image",
                    z: 3,
                    style: {
                        image: img2,
                        width: 90,
                        height: 90,
                    },
                    left: "9.4%",
                    top: "center",
                    position: [50, 50],
                },
                {
                    type: "image",
                    z: 3,
                    style: {
                        image: img,
                        width: 30,
                        height: 30,
                    },
                    left: "15.6%",
                    top: "32%",
                    position: [60, 100],
                },
                {
                    type: "text",
                    z: 3,
                    style: {
                        text: sum.toFixed(1),
                        fill: "#fff",
                        fontWeight: 400,
                        fontSize: 12,
                    },
                    left: "15.5%",
                    top: "60%",
                    position: [100, 100],
                },
                {
                    type: "text",
                    z: 3,
                    style: {
                        text: "线路运营长度",
                        fill: "#fff",
                        fontWeight: 400,
                        fontSize: 12,
                    },
                    left: "11.5%",
                    top: "52%",
                    position: [100, 100],
                },
                {
                    type: "image",
                    z: 3,
                    style: {
                        image: img2,
                        width: 140,
                        height: 140,
                    },
                    left: "4.5%",
                    top: "center",
                    position: [150, 150],
                },
            ],
        },
        tooltip: {
            trigger: "item",
        },
        legend: {
            icon: "roundRect",
            orient: "horizontal",
            data: legendData,
            right: 20,
            top: 50,
            align: "right",
            textStyle: {
                color: "#fff",
            },
            itemGap: 19,
            itemWidth: 20,
            itemHeight: 10,
            width: 380,
            itemStyle: {
                shadowColor: "rgba(0, 0, 0, 0.5)",
                shadowBlur: 12,
            },
        },
        series: seriesOption,
    };

    return option;
};

// 客流指标
export const guestsRateOpts = (dataSource) => {
    let salvProName = dataSource.map((item) => item.name);
    let salvProValue = dataSource.map((item) => item.value);
    let salvProMax = []; //背景按最大值
    for (let i = 0; i < salvProValue.length; i++) {
        salvProMax.push(1400);
    }

    const getSymbolData = (data) => {
        let arr = [];
        for (let i = 0; i < data.length; i++) {
            arr.push({
                value: data[i],
                symbolPosition: "end",
            });
        }
        return arr;
    };

    const option = {
        backgroundColor: "rgba(0, 0, 0, 0)",
        grid: {
            left: "12%",
            right: "0%",
            bottom: "-2%",
            top: "0%",
        },
        tooltip: {//提示框
            trigger: "axis",
            axisPointer: {
                type: "none",
            },
            formatter: function (params) {
                return params[0].name + " : " + params[0].value;
            },
        },
        xAxis: {//x轴
            show: false,
            type: "value",
        },
        yAxis: [ //y轴
            {
                type: "category",//类目轴
                inverse: true,//倒序
                axisLabel: { //y轴标签
                    show: true,//显示
                    color: "#C4F1FF",
                    rich: {
                        b: {
                            color: "#C4F1FF",
                            fontWeight: "800",
                            fontSize: 12,
                        },
                        a: {
                            color: "#C4F1FF",
                            fontWeight: "800",
                            fontSize: 12,
                        },
                    },
                },
                splitLine: { //分隔线
                    show: false,
                },
                axisTick: { //刻度线
                    show: false,
                },
                axisLine: { //轴线
                    show: false,
                },
                data: salvProName,//数据
            },
            {
                type: "category",
                inverse: true,
                axisTick: "none",
                axisLine: "none",
                show: true,
                axisLabel: {
                    color: "#C4F1FF",
                    fontWeight: "800",
                },
                data: salvProValue,
            },
        ],
        series: [
            {
                name: "值",//名称
                type: "bar",//类型
                zlevel: 1, //层叠
                itemStyle: { //样式
                    borderRadius: 30, //圆角
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                        {
                            offset: 0,
                            color: "rgb(10, 116, 255,1)",
                        },
                        {
                            offset: 1,
                            color: "rgb(127,237,241,1)",
                        },
                    ]),
                },
                z: 2, //层叠
                barWidth: 6, //柱状宽度
                data: salvProValue, //数据
            },
            {
                name: "发光背景",
                type: "pictorialBar",
                symbol: "image://",
                symbolSize: [40, 40],
                symbolOffset: [20, 0],
                z: 10086,
                itemStyle: {
                    color: "#0A74FF",
                },
                data: getSymbolData(salvProValue),
            },
            {
                name: "背景",
                type: "bar",
                barWidth: 6,
                barGap: "-100%",
                data: salvProMax,
                itemStyle: {
                    color: "rgba(127,237,241,.4)",
                    borderRadius: 30,
                    // backgroundColor:'#091C24'
                    // borderColor:'#00D1F0'
                },
                z: 1,
            },
        ],
    };
    return option;
};

// 历史报警
// dataSource {去年:[{name:'一月',value:50},...],今年:[{name:'一月',value:50},...]}
export const historyWarning = (dataSource) => {
    const color = ["#1890FF", "#42d7b3"];
    const legendData = Object.keys(dataSource);//
    const seriesData = [];
    let index = 0;
    for (let key in dataSource) {
        const data = dataSource[key].map((item) => item.value);
        seriesData.push({
            name: key,
            type: "line",
            smooth: true,
            symbol: "none", // 不显示连接点
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    // 坐标轴指示器，坐标轴触发有效
                    type: "line", // 默认为直线，可选为：'line' | 'shadow'
                },
            },
            lineStyle: {
                width: 3,
                shadowColor: color[index],
                shadowBlur: 20,
            },
            areaStyle: {
                opacity: 1,
                //右下左上
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color:
                            index === 0 ? "rgba(24, 144, 255, .5)" : "rgba(71, 176, 138, .5)",
                    },
                    {
                        offset: 0.3,
                        color:
                            index === 0 ? "rgba(24, 144, 255, .2)" : "rgba(71, 176, 138, .2)",
                    },
                    {
                        offset: 1,
                        color:
                            index === 0 ? "rgba(24, 144, 255, 0)" : "rgba(71, 176, 138, 0)",
                    },
                ]),
            },
            data: data,
        });
        index++;//颜色索引
    }

    const option = {
        backgroundColor: "rgba(0,0,0,0)",
        color: color,
        tooltip: {
            trigger: "axis",
            axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            },
        },
        grid: {
            left: "2%",
            right: "2%",
            bottom: "2%",
            top: "17%",
            containLabel: true,
        },
        legend: { //图例
            top: "3%",
            icon: "rect",
            orient: "horizontal",
            left: "right",
            itemWidth: 12,
            itemHeight: 12,
            textStyle: {
                color: "#fff",
                fontSize: "12px",
            },
            data: legendData,
        },
        xAxis: [
            {
                type: "category",
                data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月",],
                boundaryGap: false,
                axisTick: {
                    show: false, // 不显示坐标轴刻度线
                },
                splitLine: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                axisLabel: {
                    color: "rgba(230, 247, 255, 0.50)",
                    fontSize: 12,
                },
            },
        ],
        yAxis: [
            {
                name: '(次数)',
                type: "value",
                nameTextStyle: {
                    align: 'right',
                    color: 'rgba(230, 247, 255, 0.50)',
                },
                //y右侧文字
                axisLabel: {
                    color: "rgba(230, 247, 255, 0.50)",
                    fontSize: 12,
                },
                // y轴的分割线
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: "dashed",
                        color: "rgba(230, 247, 255, 0.20)",
                    },
                },
            },
        ],
        series: seriesData,
    };
    return option;
};
